<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>模板更新</title>

    <link rel='stylesheet' href='luckysheet/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='luckysheet/plugins/plugins.css' />
    <link rel='stylesheet' href='luckysheet/css/luckysheet.css' />
    <link rel='stylesheet' href='luckysheet/assets/iconfont/iconfont.css' />
    <link rel="stylesheet" href="layui/css/layui.css">

</head>

<body>
    <div>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">&nbsp;模板名称：</label>
                    <div class="layui-input-block">
                        <span id="templeteName" style="text-align: justify;display: block;line-height: 38px;"></span>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit="" lay-filter="saveTemplete">保存模板</button>
                </div>
                </div>
                <hr class="layui-bg-green" style="margin-left:10px;width: 95%">
        </form>
    </div>

    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:96%;height:87%;"></div>

    <script src="layui/layui.js"></script>
    <script src="luckysheet/plugins/js/plugin.js"></script>
    <script src="luckysheet/luckysheet.umd.js"></script>
    <script src="fill/fill.common.js"></script>
    <script src="fill/fill.plugins.js"></script>
    <script src="fill/fill.sheet.js"></script>

    <script>
        $(document).ready(function(){
            //模板信息
            let templeteInfo = JSON.parse(window.localStorage.getItem("updateTempleteInfo"));
            //模板名称
            $('#templeteName').text(templeteInfo.templeteName);
            
            layui.use(['form'], function(){
                let form = layui.form
                   ,layer = layui.layer;

                //保存模板
                form.on('submit(saveTemplete)', function(data){
                    let params = {
                        "templeteId": templeteInfo.templeteId,
                        "templeteName": templeteInfo.templeteName,
                        "templeteContent": luckysheet.getAllSheets(),
                        "templeteCellrelation": cellrelations,
                        "templeteProtect": protectCellData
                    };
                    $.ajax({
                        url: getUrl("/report/templetedesign/edit"),
                        type: "post",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(params),
                        dataType: "json",
                        timeout: 10000,
                        headers: {'Authorization': authorization},
                        success: function (data) {
                            if(data.code==='200') {
                                layer.msg(data.msg, {icon: 1});
                            }else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        error: function (data) {
                            //停止延时动画
                            let statusText = data.statusText;
                            let status = data.status;
                            if (statusText == "timeout") {
                                layer.msg("请求超时，请稍后再试！", {icon: 5});
                            } else {
                                if (status == undefined || status == null || status.length == 0) {
                                    layer.msg("网络异常，请稍后再试！(-1)", {icon: 5});
                                } else {
                                    layer.msg("网络异常，请稍后再试！(" + status + ")", {icon: 5});
                                }
                            }
                        }
                    });
                    return false;
                });
            });

            //系统扩展插件
            $("#expends").html(expendPlugins);
            //初始化插件
            initPluginsSelect(null);

            //单元格与插件对应关系
            cellrelations = JSON.parse(templeteInfo.templeteCellrelation);
            //受保护的单元格
            protectCellData = JSON.parse(templeteInfo.templeteProtect);
            if(protectCellData==undefined||protectCellData==null){
                protectCellData = {};
            }
            //单元格模板数据
            optionsTemplete.data = JSON.parse(templeteInfo.templeteContent);
            //创建模板
            luckysheet.create(optionsTemplete);
        });

    </script>
</body>

<div id="extendPlugins" style="margin-top: 3px;">
    <div class="layui-form">
        <div id="pluginsSelect" style="display: none;" class="layui-form-item">
            <label class="layui-form-label">选择插件：</label>
            <div class="layui-input-block" style="width: 200px;">
                <select id="selectedPlugins" lay-filter="showSelectedPlugin">
                </select>
            </div>
            <hr class="layui-bg-green" style="margin-left:10px;width: 95%">
        </div>
    </div>
    <div id="expends" class="layui-form"></div>
</div>
<div id="protectForm" style="margin-top: 35px;">
    <div class="layui-form">
        <div id="proCellSelect" style="display: none;" class="layui-form-item">
            <label class="layui-form-label">选择单元格</label>
            <div class="layui-input-block" style="width: 240px;">
                <input id="protectCellId" type="text" placeholder="请选择受保护单元格" class="layui-input">
            </div>
        </div>
    </div>
</div>
<div id="selectFile">
    <div class="layui-form">
        <div id="cellFileSelect" style="display: none;" class="layui-form-item">
            <div class="layui-upload-drag" id="test10" style="margin-top: 40px;margin-left: 100px;">
                <i class="layui-icon"></i>
                <p>点击选择上传文件</p>
            </div>
            <div id="uploadDemoView" style="display: none;margin-top: 5px;margin-left: 100px;">
                <span id="filename"></span>
            </div>
            <div style="margin-top: 5px;margin-left: 140px;">
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        </div>
    </div>
</div>
</html>